<mat-card>Add {{service}}</mat-card>
<mat-progress-spinner *ngIf="!areItemsLoaded" mode="indeterminate">
</mat-progress-spinner>
<div class="content" *ngIf="areItemsLoaded">

  <div class="content" [formGroup]="itemsForm">
    <mat-form-field>
      <mat-label>Item</mat-label>
      <mat-select placeholder="itemId" name="itemId" formControlName="itemId" required>
        <mat-option *ngFor="let i of items" [value]="i.id">
          {{i.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="legacy">
      <mat-label>Quantity</mat-label>
      <input matInput placeholder="quantity" name="quantity" formControlName="quantity" required>
      <mat-error *ngIf="quantity.invalid">{{getQuantityErrorMessage()}}</mat-error>
    </mat-form-field>

    <button mat-raised-button (click)="addDeliveryItem()" [disabled]="itemsForm.invalid">
      Add item to {{service}}
    </button>
  </div>

  <div *ngIf="deliveryItemRequests.length > 0">
    <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef> Index</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.itemId}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{itemsById[row.itemId].name}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="quantity">
        <mat-header-cell *matHeaderCellDef> Quantity</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.quantity}}</mat-cell>
      </ng-container>

      <mat-header-row
        *matHeaderRowDef="['id', 'name', 'quantity']"></mat-header-row>
      <mat-row
        *matRowDef="let row; columns: ['id', 'name', 'quantity']"></mat-row>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>

  <div class="content" [formGroup]="form">

    <mat-form-field appearance="legacy">
      <mat-label>First name</mat-label>
      <input matInput placeholder="firstName" name="firstName" formControlName="firstName" required>
    </mat-form-field>

    <mat-form-field appearance="legacy">
      <mat-label>Last name</mat-label>
      <input matInput placeholder="lastName" name="lastName" formControlName="lastName" required>
    </mat-form-field>

    <mat-form-field appearance="legacy">
      <mat-label>Email</mat-label>
      <input matInput placeholder="email" formControlName="email" name="email" required>
      <mat-error *ngIf="email.invalid">{{getEmailErrorMessage()}}</mat-error>
    </mat-form-field>

    <mat-form-field appearance="legacy">
      <mat-label>Phone number</mat-label>
      <input matInput placeholder="phoneNumber" formControlName="phoneNumber"
             name="phoneNumber">
      <mat-hint>9 digits</mat-hint>
    </mat-form-field>

    <mat-form-field appearance="legacy">
      <mat-label>Street</mat-label>
      <input matInput placeholder="street" formControlName="street" name="street"
             required>
    </mat-form-field>

    <mat-form-field appearance="legacy">
      <mat-label>House number</mat-label>
      <input matInput placeholder="houseNumber" formControlName="houseNumber" name="houseNumber" required>
      <mat-error *ngIf="houseNumber.invalid">{{getHouseNumberErrorMessage()}}</mat-error>
    </mat-form-field>

    <mat-form-field appearance="legacy">
      <mat-label>City</mat-label>
      <input matInput placeholder="city" formControlName="city" name="city" required>
    </mat-form-field>

    <mat-form-field appearance="legacy">
      <mat-label>Zip code</mat-label>
      <input matInput placeholder="postalCode" formControlName="postalCode" name="postalCode" required>
    </mat-form-field>

    <mat-form-field appearance="legacy">
      <input matInput [min]="today" [matDatepicker]="picker" placeholder="Scheduled for" name="scheduledFor"
             formControlName="scheduledFor" required>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </div>

  <div class="content" *ngIf="shouldShowComplaintForm()" [formGroup]="complaintForm">

    <mat-form-field>
      <mat-label>Requested resolution</mat-label>
      <mat-select placeholder="requestedResolution" name="requestedResolution" formControlName="requestedResolution"
                  required>
        <mat-option *ngFor="let r of resolutions" [value]="r">
          {{r}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="legacy">
      <mat-label>Fault</mat-label>
      <input matInput placeholder="fault" formControlName="fault" name="fault" required>
    </mat-form-field>
  </div>

  <button mat-raised-button (click)="add()" [disabled]="shouldDisableButton()">Add</button>
</div>
